$calendar-prefix-cls: "#{$css-prefix}calendar";
.#{$calendar-prefix-cls} {
  &-top-change &-top-icon,
  &-top-change &-top-text {
    display: inline-block;
    vertical-align: middle;
    font-size: $calendar-top-text-font-size;
  }
  &-top-icon {
    &:hover {
      background-color: $background-color-base;
    }
    &.h-prev-year {
      margin-right: $calendar-prev-year-margin-right;
    }
    &.h-next-year {
      margin-left: $calendar-next-year-margin-left;
    }
  }

  &-top-change{
    height: $calendar-top-change-height;
    line-height: $calendar-top-change-line-height;
    text-align: center;
    position: relative;
  }
  &-month-content {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }
  &-top-icon {
    cursor: pointer;
  }
  &-month-content.#{$calendar-prefix-cls}-month-week &-month-content-item-tag,
  &-month-content.#{$calendar-prefix-cls}-month-week &-month-content-item {
    color: $calendar-month-content-color;
    font-size: $calendar-month-content-font-size;
    background: $calendar-month-content-background;
    border-color:$calendar-month-content-border-color;
  }
  &-month-content-item {
    font-size: $calendar-month-content-item-font-size;
    width: 14.28%;
    text-align: center;
    color: $calendar-month-content-item-color;
    position: relative;
    height: $calendar-month-content-item-height;
    line-height: $calendar-month-content-item-height;
    padding: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    /* border:2px solid #fff; */
    border: $calendar-month-content-item-boder;
    border-width: $calendar-month-content-item-border-width;
    
    .h-badge {
      width: 0;
      height: 0;
      .h-badge-count {
        top: -25px;
        right: -20px;
      }
    }
  }
  &-month-content-item:nth-child(7n + 1){
    border-width: $calendar-month-content-item-nth-child-border-width;
  }
  &-month-week {
    background: $calendar-month-content-background;
  }
  &-month-week &-month-content-item {
    border-top-width: 1px;
  }
  &-month-content.#{$calendar-prefix-cls}-month-day &-month-content-item {
    cursor: pointer;
    background: $date-picker-cell-hover-bg;
  }
  &-month-content.#{$calendar-prefix-cls}-month-day &-month-content-item.#{$calendar-prefix-cls}-month-item-empty {
    background: none;
  }
  &-month-content-item.#{$calendar-prefix-cls}-month-item-disable{
    background: $input-disabled-bg !important;
    color: $btn-disable-color;
  }
  &-month-content.#{$calendar-prefix-cls}-month-day &-month-content-item.#{$calendar-prefix-cls}-month-restDay{
    color: $calendar-month-restDay-color;
    background: none;
  }
  &-month-content.#{$calendar-prefix-cls}-month-day &-month-content-item.#{$calendar-prefix-cls}-month-day-active {
    background:$calendar-month-day-selected-background;
    border-radius:4px;
    color:$calendar-month-day-active-color;
  }
  &-month-content.#{$calendar-prefix-cls}-month-day {
    border: $calendar-month-day-border;
  }
  &-month {
    width: 22%;
    margin: 1.5%;
    float: left;
    flex: 0 0 auto;
    // height: 330px;
    & > div {
      box-shadow: $calendar-month-div-box-shadow;
    }
  }
  &-month-title {
    display: block;
    font-size: $calendar-month-title-font-size;
    height: $calendar-month-title-height;
    line-height: $calendar-month-title-line-height;
    text-align: center;
    background:$calendar-month-content-background;
    border-radius:$calendar-month-title-border-radius;
  }
  &-wrapper {
    position: relative;
  }
  &-context-menu {
    display: none;
    position: absolute;
  }
  &-handle {
    width: $calendar-handle-width;
    height: $calendar-handle-height;
    padding: $calendar-handle-padding;
    text-align: center;
    background-color: $calendar-handle-background-color;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-radius: 4px;
    -webkit-box-shadow: $calendar-handle-box-shadow;
    box-shadow: $calendar-handle-box-shadow;
    border:$calendar-handle-border;
  }
  &-handle &-handle-item {
    display: block;
    height: $calendar-handle-item-height;
    line-height: $calendar-handle-item-height;
    outline: none;
    list-style: none;
    font-size: $calendar-handle-item-font-size;
    cursor: pointer;
  }
  &-handle &-handle-item.#{$calendar-prefix-cls}-handle-setWorkDay {
    border-bottom: $calendar-handle-border;
  }
  &-handle &-handle-item:hover {
      background: $calendar-handle-item-hover-background;
      color: $calendar-handle-item-hover-color;
  }
}
